<script setup>
const router = useRouter();
const route = useRoute();
const token = useCookie("token");
const open = ref(false);
const menuitems = [
  {
    title: "消费产品",
    path: "/",
  },
  {
    title: "下载中心",
    path: "/download",
  },
  {
    title: "技术支持",
    path: "/support",
  },
  {
    title: "关于我们",
    path: "/about",
  },
];
const goMenu = (path) => {
  router.push(path);
  open.value = false;
};
const outLogin = () => {
  token.value = "";
};
</script>
<template>
  <div class="w-screen h-[64px] shadow-sm fixed bg-[#fff] z-[99] top-0 left-0">
    <div
      class="max-w-screen-lg h-[64px] px-[10px] lg:px-[10px] lg:mx-auto flex items-center relative"
    >
      <img
        @click="goMenu('/')"
        class="w-[124px] cursor-pointer"
        src="https://res.insta360.com/static/7119f72055ff6a284316f1c5451ee280/logo-black-cn.svg"
        alt="insta360"
      />
      <div
        class="size-[40px] flex justify-end items-center mr-[20px] grow lg:hidden"
      >
        <UIcon @click="open = !open" name="i-heroicons-light-bulb" />
      </div>
      <div
        class="lg:grow lg:w-auto lg:flex"
        :class="{ block: open, hidden: !open }"
      >
        <ul
          class="w-[100%] bg-[#fff] lg:space-x-[30px] lg:ml-[80px] z-[99] lg:flex flex-col lg:flex-row absolute left-0 top-[64px] lg:top-0 lg:relative"
        >
          <li
            class="h-[64px] leading-[64px] cursor-pointer hover:text-[#333] pl-[10px] lg:pl-[0px]"
            :class="{
              ' border-b-[1px] border-[#666] text-[#333] border-solid':
                route.path == item.path,
            }"
            v-for="item in menuitems"
            :key="item.path"
            @click="goMenu(item.path)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <UButton
        label="登录"
        class="px-[20px]"
        :ui="{ rounded: 'rounded-full' }"
        @click="goMenu('/account')"
        v-if="!token"
      ></UButton>
      <UPopover mode="hover" v-else>
        <UAvatar
          src="https://avatars.githubusercontent.com/u/739984?v=4"
          alt="Avatar"
        />
        <template #panel>
          <div class="w-[140px] grid grid-cols-1 divide-y">
            <div
              class="h-[40px] leading-[40px] text-center hover:text-[green] cursor-pointer"
            >
              个人信息
            </div>
            <div
              @click="outLogin"
              class="h-[40px] leading-[40px] text-center hover:text-[green] cursor-pointer"
            >
              退出登录
            </div>
          </div>
        </template>
      </UPopover>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
